<template>
	<div id="footer">
		<span>
			<span>已完成 {{finishTotal}} / 全部 {{items.length}}</span>
		</span>
		<button @click="clearAll">clear all</button>
	</div>
</template>

<script>
	export default {
		name: 'Footer',
		data() {
			return {
				items: [],
			}
		},
		methods:{
			clearAll(){
				this.$bus.$emit('claerData','aaaa')
			}
		},
		computed:{
			finishTotal(){
				return this.items.filter((item)=>{
					return item.isFinish
				}).length
			}
		},
		mounted() {
			this.$bus.$on('items', (items) => {
				this.items = items;
			})
		}
	}
</script>

<style>
	#footer {
		width: 200px;
		display: flex;
		flex-direction: row;
		margin: auto;
		margin-top: 15px;
	}

	#footer span {
		align-items: center;
	}

	#footer button {
		margin-left: auto;
	}
</style>
